<template>
	<!-- titlt部分 -->
	<view class="titlebox">
		<image class="titlebox-backimg" src="../../static/上一步.png" @click="gotoIndex"></image>
		<view class="titlebox-titlebox">高佣短剧</view>
		<view class="titlebox-search-box">
			<image class="titlebox-search-box-serchimg" src="../../static/搜索.png"></image>
			<input type="text" placeholder="请输入短剧名称搜索">
		</view>
	</view>

	<!-- 轮播图部分 -->
	<view class="swiperbox">
		<swiper class="swiper-style" indicator-dots autoplay interval="3000" circular>
			<swiper-item>
				<image class="swiper-image" src="../../static/滴滴出行.png"></image>
			</swiper-item>
			<swiper-item>
				<image class="swiper-image" src="../../static/滴滴出行.png"></image>
			</swiper-item>
			<swiper-item>
				<image class="swiper-image" src="../../static/滴滴出行.png"></image>
			</swiper-item>
			<swiper-item>
				<image class="swiper-image" src="../../static/滴滴出行.png"></image>
			</swiper-item>
			<swiper-item>
				<image class="swiper-image" src="../../static/滴滴出行.png"></image>
			</swiper-item>
			<swiper-item>
				<image class="swiper-image" src="../../static/滴滴出行.png"></image>
			</swiper-item>
		</swiper>
	</view>

	<!-- tabbar -->
	<scroll-view scroll-x class="tabbar">
		<view class="tabbarbox">
			<view v-for="(item, index) in tabs" :key="index" :class="['tabbar-box', { 'active': currentTab === index }]"
				@click="selectTab(index)">
				<image class="tabbar-box-img" :src="item.img"></image>
				<view class="tabbar-box-text">{{ item.text }}</view>
				{{ tab }}
			</view>
		</view>
	</scroll-view>
	<!-- 	<scroll-view scroll-x class="tabbar">
		<view class="tabbarbox">
			<view class="tabbar-box">
				<image class="tabbar-box-img" src="../../static/抖音小图标.png"></image>
				<view class="tabbar-box-text">抖音</view>
			</view>
			<view class="tabbar-box">
				<image class="tabbar-box-img" src="../../static/快手.png"></image>
				<view class="tabbar-box-text">快手</view>
			</view>
			<view class="tabbar-box">
				<image class="tabbar-box-img" src="../../static/微信小图标.png"></image>
				<view class="tabbar-box-text">微信</view>
			</view>
			<view class="tabbar-box">
				<image class="tabbar-box-img" src="../../static/淘宝小图标.png"></image>
				<view class="tabbar-box-text">淘宝</view>
			</view>
		</view>
	</scroll-view> -->

	<!-- drama部分 -->
	<view class="drama">
		<view class="dramabox">
			<view class="dramabox-drama">
				<view class="dramabox-drama-promoters">推广人数·6.49万</view>
			</view>
			<view class="dramaname">护国神婿</view>
			<view class="completion">已完结 共38集</view>
		</view>

		<view class="dramabox">
			<view class="dramabox-drama">
				<view class="dramabox-drama-promoters">推广人数·6.49万</view>
			</view>
			<view class="dramaname">护国神婿</view>
			<view class="completion">已完结 共38集</view>
		</view>

		<view class="dramabox">
			<view class="dramabox-drama">
				<view class="dramabox-drama-promoters">推广人数·6.49万</view>
			</view>
			<view class="dramaname">护国神婿</view>
			<view class="completion">已完结 共38集</view>
		</view>

		<view class="dramabox">
			<view class="dramabox-drama">
				<view class="dramabox-drama-promoters">推广人数·6.49万</view>
			</view>
			<view class="dramaname">护国神婿</view>
			<view class="completion">已完结 共38集</view>
		</view>

		<view class="dramabox">
			<view class="dramabox-drama">
				<view class="dramabox-drama-promoters">推广人数·6.49万</view>
			</view>
			<view class="dramaname">护国神婿</view>
			<view class="completion">已完结 共38集</view>
		</view>

		<view class="dramabox">
			<view class="dramabox-drama">
				<view class="dramabox-drama-promoters">推广人数·6.49万</view>
			</view>
			<view class="dramaname">护国神婿</view>
			<view class="completion">已完结 共38集</view>
		</view>

		<view class="dramabox">
			<view class="dramabox-drama">
				<view class="dramabox-drama-promoters">推广人数·6.49万</view>
			</view>
			<view class="dramaname">护国神婿</view>
			<view class="completion">已完结 共38集</view>
		</view>

		<view class="dramabox">
			<view class="dramabox-drama">
				<view class="dramabox-drama-promoters">推广人数·6.49万</view>
			</view>
			<view class="dramaname">护国神婿</view>
			<view class="completion">已完结 共38集</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 0, // 默认选中第一个
				tabs: [{
						img: '../../static/抖音小图标.png',
						text: '抖音'
					},
					{
						img: '../../static/快手.png',
						text: '快手'
					},
					{
						img: '../../static/微信小图标.png',
						text: '微信'
					},
					{
						img: '../../static/淘宝小图标.png',
						text: '淘宝'
					}
				],
			}
		},
		methods: {
			selectTab(index) {
				this.currentTab = index;
			},
			gotoIndex() {
				// 在tabbar中使用uniapp的switchTab方法跳转
				uni.switchTab({
					url: '/pages/index/index', // 我的路径
				});
			},
		}
	}
</script>

<style>
	page {
		background: #F6F6F6;
	}

	/* title部分样式 */
	.titlebox {
		display: flex;
		align-items: center;
		padding: 2%;
		background: rgb(241, 224, 84);
	}

	.titlebox-backimg {
		display: block;
		width: 20px;
		height: 20px;
		margin-right: 10px;
	}

	.titlebox-titlebox {
		font-size: 15px;
		color: black;
		margin-right: 25px;
		font-weight: 600;
	}

	.titlebox-search-box {
		display: flex;
		align-items: center;
		flex: 1;
		padding: 2% 0%;
		border-radius: 30px;
		border: 1px solid #eee;
		background: white;
	}

	.titlebox-search-box-serchimg {
		width: 20px;
		height: 20px;
		display: block;
		margin-left: 10px;
		margin-right: 10px;
	}

	/* 轮播图样式 */
	.swiperbox {
		background: linear-gradient(to bottom, rgb(241, 224, 84), #F6F6F6 90%);
		margin-bottom: 5px;
	}

	.swiper-style {
		width: 95%;
		margin: 0 auto;
		background: white;
		border-radius: 10px;
	}

	.swiper-image {
		width: 100%;
		/* 图片宽度 */
		height: 100%;
		/* 图片高度 */
		object-fit: cover;
		/* 确保图片覆盖整个区域，不留空白 */
	}

	/* tabbar部分 */
	.tabbar {
		align-items: center;
		margin-bottom: 10px;
	}

	.tabbarbox {
		padding: 2%;
		/* display: inline-block; */
		white-space: nowrap;
		display: flex;
		gap: 4%;
	}

	.tabbar-box {
		padding: 2% 5%;
		border-radius: 30px;
		display: flex;
		align-items: center;
		background: white;
	}

	.tabbar-box-img {
		width: 20px;
		height: 20px;
		display: block;
		margin-right: 5px;
	}

	.tabbar-box-text {
		font-size: 15px;
	}


	/* tab被选样式 */
	.active {
		position: relative;
		color: black;
		/* font-weight: bold; */
		background-color: rgb(241, 224, 84);
	}

	.active::after {
		content: "";
		position: absolute;
		width: 0;
		height: 0;
		border-width: 29px;
		border-style: solid;
		border-color: rgb(241, 224, 84) transparent transparent transparent;
		left: 35px;
		top: 33px;
		border-top-width: 11px;
		border-right-width: 10px;
		border-bottom-width: 5px;
		border-left-width: 10px;
		border-top-style: solid;
		border-right-style: solid;
		border-bottom-style: solid;
		border-left-style: solid;
		border-top-color: rgb(241, 224, 84);
		border-right-color: transparent;
		border-bottom-color: transparent;
		border-left-color: transparent;

	}


	/* drama部分 */
	.drama {
		display: flex;
		flex-wrap: wrap;
		gap: 3%;
		padding: 2%;
		padding-bottom: 10%;
	}

	.dramabox {
		width: 31%;
		margin-bottom: 10px;
	}

	.dramabox-drama {
		padding: 5% 10% 70%;
		border-radius: 10px;
		background: burlywood;
		margin-bottom: 5px;
	}

	.dramabox-drama-promoters {
		font-size: 10px;
		text-align: center;
		padding: 2%;
		background: wheat;
		border-radius: 3px;
	}

	.dramaname {
		font-size: 14px;
	}

	.completion {
		font-size: 12px;
		color: rgb(160, 160, 160);
	}
</style>
